import React, { useState,useEffect } from 'react';
import './invoice.css'
import { DatePicker, Button, Input, Select } from 'antd';
import {getordertabs} from '../../request/index'
const { RangePicker } = DatePicker;


interface Order {
  orderno: string;
  salesman: string;
  allprice: number;
  img: string;
  introduction: string;
  status: string;
  unitprice: number;
  business: string;
  name: string;
  phone: string;
  adress: string;
}


const index: React.FC = () => {
  const [indexed, setindexed] = useState<string>('全部')
  const [orderlist,setorderlist]=useState<Order[]>([])
    const [orderNumber, setOrderNumber] = useState<string>(''); 
     const [activeTab, setActiveTab] = useState<string>('全部');
  // 下拉框的
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };




  // 定义获取订单列表的函数
  const fetchOrderList = async () => {
    try {
      const res = await getordertabs(); // 调用 API
      console.log('水果订单数据', res.data.tabslist);
       setorderlist(res.data.tabslist)// 更新状态
    } catch (error) {
      console.error('获取水果订单列表时出错:', error);
    }
  };

useEffect(()=>{
fetchOrderList();
},[])



const renderTabs = () => {
    let filteredOrders = orderlist; 


    if (indexed !== '全部') {
      filteredOrders = orderlist.filter(order => order.status === indexed); 
    }

       if (orderNumber) {
      filteredOrders = filteredOrders.filter(order => order.orderno.includes(orderNumber));
    }

    return (
      <div style={{ width: '100%', height: '100%' }}>
        <div className='tablists-hed'>
          <div className='he-nie'>
            <p>订单信息</p>
            <p>卖家</p>
            <p>收货信息</p>
            <p>操作</p>
          </div>
        </div>

        {filteredOrders && filteredOrders.map((item, index) => {
          return (
            <div key={index} className='tablist'>
              <div className='tablist_top'>
                <div className='tp1'>
                  <p>订单号:<span>{item.orderno}</span></p>
                  <p>业务员:<span>{item.salesman}</span></p>
                </div>
                <div>
                  共1件商品 &emsp;&emsp;&emsp;合计:￥<span>{item.allprice}</span>（含运费:￥0.00）
                </div>
              </div>
              <div className='tablist_botoom'>
                {/* 1 */}
                <div className='bomone'>
                  <div style={{ width: '20%', height: '85%' }}>
                    <img src={item.img} alt="" />
                  </div>
                  <div style={{ width: '40%' }}>
                    <p>{item.introduction}</p>
                    <p style={{ color: 'red' }}>{item.status}</p>
                  </div>
                  <div style={{ width: '10%' }}>
                    <p>￥<span>{item.unitprice}</span></p>
                    <p>x1</p>
                  </div>
                </div>
                {/* 2 */}
                <div className='bomtwo'>
                  {item.business}
                </div>
                {/* 3 */}
                <div className='bomthree'>
                  <p><span>{item.name}</span><span>{item.phone}</span></p>
                  <p>{item.adress}</p>
                </div>
                {/* 4 */}
                <div className='bomfour'>
                  订单详情
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

 const resetFilters = () => {
    setindexed('全部'); 
    setOrderNumber(''); 
    setActiveTab('全部')

  };





  return (
    <div className='invoicebox'>
      <div className='invoicebox_hed'>
        <div className='oredercon'>订单管理</div>
        <div className='ordernum'>
          <p>
            订单编号:<Input placeholder="请输入店铺名称" style={{ width: '200px' }} value={orderNumber} onChange={(e)=>setOrderNumber(e.target.value)}/>
          </p>
          <p>
            下单时间:<RangePicker />
          </p>
        </div>

        <div className='orderstats'>
          <p>
            订单状态:
            <Select
              defaultValue="全部"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                { value: '全部', label: '全部' },
                { value: '待付款', label: '待付款' },
                { value: '待发货', label: '待发货' },
                { value: '待收货', label: '待收货' },
                { value: '已完成', label: '已完成' },
                { value: '已关闭', label: '已关闭' },
              ]}
            />

          </p>

          <p>
            退款状态:
            <Select
              defaultValue="全部"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                  { value: '全部', label: '全部' },
                { value: '待付款', label: '待付款' },
                { value: '待确认', label: '待确认' },
                { value: '已确认', label: '已确认' },
                { value: '已收款', label: '已收款' },
              ]}
            />

          </p>
        </div>

        <div className='headbtn'>
          <Button type="primary" onClick={renderTabs}>筛选订单</Button>
          <Button onClick={resetFilters}>清空筛选条件</Button>
          <Button>批量导出</Button>
        </div>

      </div>


      <div className='invoice_hedbom'>
        <p onClick={() => setindexed('全部')}>全部</p>
        <p onClick={() => setindexed('待付款')}>待付款</p>
        <p onClick={() => setindexed('待发货')}>待发货</p>
        <p onClick={() => setindexed('已完成')}>已完成</p>
        <p onClick={() => setindexed('已关闭')}>已关闭</p>
      </div>
      {/* tab切换内容部分 */}
      <div className='invoicecontent'>
        {renderTabs()}
      </div>

    </div>
  )
}

export default index
